<template>
  <el-row :gutter="10">
    <el-col v-for="(item) in items" :span="1/items.length * 24">
      <TableInfo :columns="item.columns" :title="item.title" :data="basicInfo[item.key]">
        <Component :is="item.icon" />
      </TableInfo>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import TableInfo, {type TableInfoColumn} from "./TableInfo.vue";
import {Cpu, Postcard, User} from "@element-plus/icons-vue";
import type {Component} from "vue";
import type {BasicInfo} from "../types";

let {basicInfo} = defineProps<{
  basicInfo: BasicInfo
}>();

type item = {
  key: keyof BasicInfo,
  icon: Component,
  title: string,
  columns: Array<TableInfoColumn>
}

const items: Array<item> = [
  {
    key: 'car',
    title: "车辆信息",
    icon: Postcard,
    columns: [{
      label: '车票号牌',
      prop: 'company_car_name'
    }]
  },
  {
    key: 'device',
    title: "检测设备",
    icon: Cpu,
    columns: [{
      label: "设备编号",
      prop: "company_device_name"
    }]
  },
  {
    key: 'personnel',
    title: "人员情况",
    icon: User,
    columns: [{
      label: '姓名',
      prop: 'company_personnel_name'
    }, {
      label: "职务",
      prop: 'company_personnel_position'
    }, {
      label: '电话',
      prop: 'company_personnel_phone'
    }]
  }
]
</script>

<style scoped>

</style>